<template>
	<view>
		<scroll-view scroll-x="true" :show-scrollbar="false" enable-flex class="home-tabs ">
			<view class="home-tabs-items">
				<view
					@click="chosed_tabItem(item)"
					:class="{
						'home-tabs-item-active': vuex_address_dafauflt.id == item.id,
						'home-tabs-item-normal': vuex_address_dafauflt.id !== item.id,
						'u-margin-left-30': index == 0
					}"
					class="home-tabs-item g-b-r u-font-32"
					v-for="(item, index) in region_list"
					:key="index"
				>
					{{ item.region_name }}
				</view>
			</view>
		</scroll-view>

		<view class="hot_resources u-flex u-flex-wrap u-row-between">
			<!-- :class="{
				'u-padding-left-10' : i % 2 !== 0,
				'u-padding-right-10' : i % 2 == 0
			}" -->
			<view v-for="(item, i) in house_list" :key="i" class="hot_resources-item u-margin-bottom-30 " @click="goto_details(item)">
				<u-image :src="item.img" :height="295" :width="690" duration="300" border-radius="10" class="hot_resources-img g-b-r ">
					<u-loading slot="loading"></u-loading>
				</u-image>

				<view class="u-padding-left-30 u-padding-right-30 u-padding-bottom-20">
					<!-- 价格 -->
					<view class="price u-flex u-row-between u-margin-top-8">
						<view class="u-flex  u-col-center">
							<text v-if="item.price" class="price-num u-font-35 u-margin-right-2 u-margin-left-0">¥{{ item.price }}</text>
							<text v-if="item.price" class=" u-font-38 u-main-color">·</text>
							<text class="u-font-30 u-margin-left-2 oneLine-noWrap house_name">{{ item.house_name }}</text>
						</view>
						<view class="u-flex ">
							<u-icon name="star-fill" color="#FA3534" size="34"></u-icon>
							<text class="click_num u-font-24 u-margin-left-10">{{ item.click_num }}</text>
						</view>
					</view>
					<!-- 关键字 -->
					<view class=" address  u-margin-top-8">
						<text class=" address-text u-font-32">{{ item.keywords }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 更多房源 -->
		<!-- v-if="house_list.length !== 0" -->
		<view v-if="Loading" @click="look_more" class="u-margin-right-25 u-margin-left-25 u-flex u-row-center u-border u-padding-20 g-b-r-b ">
			<text class="u-margin-right-10 u-font-30">更多{{ vuex_address_dafauflt.region_name }}房源</text>
			<u-icon name="arrow-right" color="#000000" size="28"></u-icon>
		</view>

		<!-- 骨架组件 -->
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	name: 'home-tab',
	props: {
		region_list: {
			type: Array,
			default: () => []
		},
		house_list: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			chosed: {}
		};
	},
	methods: {
		look_more() {
			console.log('更多房源');
			let not_init = true; //
			this.$u.route({
				url: 'pages/search/index',
				params: {
					not_init
				}
			});
		},
		chosed_tabItem(item) {
			this.$u.vuex('vuex_address_dafauflt', item);
		},
		goto_details(item) {
			this.$u.route({
				url: 'pages/roomDetails/index',
				params: {
					id: item.id
				}
			});
		}
	},
	computed: {
		...mapState({
			vuex_address_dafauflt: state => state.vuex_address_dafauflt
		}),
		Loading: function() {
			let Loading = false;
			if (this.region_list.length !== 0 && this.house_list.length !== 0) {
				Loading = true;
			}
			return Loading;
		}
	}
};
</script>

<style lang="scss">
.house_name {
	width: 300rpx;
}

.click_num {
	font-weight: 700;
}

.price-num {
	font-weight: 700;
}

.address-text {
	display: block;
	width: 600rpx;
}

.hot_resources-item {
	// background-color: #18B566;
	// flex-basis: 50%;
	border: solid #eee 1rpx;
	border-radius: 10rpx;
}

.hot_resources-img {
}

.hot_resources {
	padding: 0 30rpx 10rpx 30rpx;
	// background-color: red;
}

.home-tabs-item-active {
	border: 1rpx solid $u-main-color;
}

.home-tabs-item-normal {
	border: 1rpx solid $u-light-color;
}

.home-tabs-item {
	padding: 0rpx 20rpx;
	// margin: 0 10rpx;
	margin-right: 20rpx;
	display: inline-block;
	height: 65rpx;
	line-height: 65rpx;
	font-weight: 700;
}

.home-tabs-items {
	display: flex;
	white-space: nowrap;
	align-items: center;
	height: 130rpx;
	background-color: #ffffff;
	// flex-wrap: nowrap;
}

.home-tabs {
	// background-color: red;
}
</style>
